<template>
  <div class="app-container">

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">

      </el-col>
      <right-toolbar @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table :data="taskList">
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <!-- <el-table-column label="关联企业" align="center" prop="entityName" /> -->
      <!-- <el-table-column label="关联工种" align="center" prop="jobName" /> -->
      <el-table-column label="培训任务名称" align="center" prop="taskName" />
      <el-table-column label="任务详情" align="center" prop="description">
        <template slot-scope="scope">
          <el-tooltip effect="dark" :content="scope.row.description || '无描述'" placement="top"
            :disabled="!scope.row.description || scope.row.description.length <= 10" popper-class="custom-tooltip">
            <div class="description-cell">
              {{ scope.row.description ? (scope.row.description.length > 10 ? scope.row.description.substring(0, 10) +
                '...' : scope.row.description) : '-' }}
            </div>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column label="任务状态" align="center" prop="taskStatus">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.taskStatus" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
            :inactive-value="0" :disabled="true">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="toUrl('/study/index?id=' + scope.row.id)"
            v-hasPermi="['demo:task:edit']">去学习</el-button>
          <el-button v-if="scope.row.taskTopicList && scope.row.taskTopicList.length" size="mini" type="text"
            icon="el-icon-delete" @click="showExam(scope.row.taskTopicList)" v-hasPermi="['demo:task:remove']">去考试</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-drawer title="我是标题" :visible.sync="drawer" :direction="direction" :before-close="handleClose">
      <exam :data="examData" title="我是标题" />
    </el-drawer>



  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { listTopicForTask } from "@/api/demo/topic/topic";
import { listTask } from "@/api/demo/task/task";

import exam from './exam.vue';

export default {
  name: "Index",
  components: { exam },
  data() {
    return {
      taskList: [],
      examData: [],
      queryParams: {
        pageNum: 1,
        pageSize: 99,
        taskStatus: 1,
        taskId: null,
      },

    };
  },
  computed: {
    ...mapGetters(["user"]),
  },
  mounted() {

    this.getList();

  },
  methods: {
    /** 查询培训任务列表 */
    getList() {
      listTask().then(response => {
        this.taskList = response.rows;
        if (response.rows.length < 1) {
          return
        }
        this.queryParams.taskId = response.rows[0].id;
        // this.startExam()
      });
    },
    startExam() {

      listTopicForTask({
          taskId: this.id,
          questionStatus: 1,
      }).then(res => {
        console.log(res)
        if (res.code == 200) {
          if (res.data.length) {

            this.examData = res.data
            this.examTitle = this.study.taskName + " 测试"
            // this.$refs.popupDiv.open("bottom")

          } else {
            // uni.showToast({
            //   icon: 'none',
            //   title: "无对应测试题"
            // })
          }
        } else {
          // uni.showToast({
          //   icon: 'none',
          //   title: "题库错误"
          // })
        }
      })

    },
    toUrl(url) {
      this.$router.push(url);
    },
    showExam(list) {
      this.examData = list
      this.drawer = true
    }
  }
};
</script>

<style scoped lang="scss"></style>
